<template>
  <div class="tree">
    <a-tree
      v-model:expandedKeys="expandedKeys"
      v-model:selectedKeys="selectedKeys"
      v-model:checkedKeys="checkedKeys"
      checkable
      :tree-data="treeData"
      @check="check"
    >
      <template #title="{ title }">
        <span>{{ title }}</span>
      </template>
    </a-tree>
  </div>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue'
const map = defineProps({
  map: Object,
  docLayer: Object,
})
let children = ref([])

const treeData = [
  {
    title: '地图文档',
    key: '0-0',
    children: children.value,
  },
]
const expandedKeys = ref(['0-0'])
const selectedKeys = ref(['0-0-0', '0-0-1', '0-0-2', '0-0-3', '0-0-4'])
const checkedKeys = ref(['0-0-0', '0-0-1', '0-0-2', '0-0-3', '0-0-4'])

watch(expandedKeys, () => {
  console.log('expandedKeys11', expandedKeys)
})
watch(selectedKeys, () => {
  console.log('selectedKeys11', selectedKeys)
})
watch(checkedKeys, () => {
  console.log('checkedKeys11', checkedKeys)
})
const check = (checkedKeys, e) => {
  const arr = [0, 1, 2, 3, 4]
  let layerArr = e.checkedNodes
  let getUnshowLayer = (arr, layerArr) => {
    let res = []
    res = arr.filter((el) => {
      return !layerArr.find((obj) => {
        return el == obj.layerId
      })
    })
    return res
  }
  // 需要隐藏的图层数组
  console.log(getUnshowLayer(arr, layerArr))
  let hideLayerId = getUnshowLayer(arr, layerArr)
  map.docLayer.setLayerStatus(hideLayerId.join(','), 'hide')
}

//获取地图中所有图层信息
let layerArr = ref([])
function getLayersInfo() {
  //实例化Zondy.Service.Catalog.MapDoc类，设置操作的地图文档为用户指定的地图文档,地图为索引值为0的地图
  var docCatalog = new Zondy.Catalog.MapDoc({
    ip: 'localhost',
    port: 6163,
    //设置地图文档的名称
    docName: 'smartRoad',
    //设置地图的索引号
    mapIndex: 0,
  })
  //调用getLayersInfo函数，获取地图文档中所有图层相关信息，在回调函数中处理结果
  docCatalog.getLayersInfo(getListSuccess)
}

//获取服务器地图文档列表成功后的回调函数
// 定义目录树的数组
function getListSuccess(data) {
  if (data.succeed) {
    if (data == null) {
      alert('没有获取到矢量地图文档！')
      return
    } else {
      //将一个JSON转换成一个包含JSON文本的字符串
      var formatData = JSON.stringify(data)
      layerArr.value = data.value
      layerArr.value.map((item, index) => {
        return children.value.push({
          title: item.Name,
          key: '0-0-' + index,
          layerId: index,
        })
      })
    }
  } else {
    alert('获取到矢量地图文档失败！')
    return
  }
}
onMounted(() => {
  getLayersInfo()
})
</script>

<style scoped>
:deep .ant-tree-icon-hide {
  position: fixed;
  top: 35vh;
  right: 1vw;
  width: 200px;
  background: rgba(0,0,0,0.5);
  color: white;
  z-index: 100;
}

:deep .ant-tree .ant-tree-node-content-wrapper:hover {
    background-color: #5b656a;
}
/* :deep .ant-tree-title:hover{
  background: rgba(0,0,0,0.5);
} */

:deep .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background-color: #52a3cb;
}
/* :deep .ant-tree-title */
</style>
